<template>
	<div>
	    <el-steps :space="250"  align-center center :active="stateIndex" :process-status="'finish'" finish-status="success">
	      <el-step title="管理员已确认" description="2017-09-21 14:04:22"></el-step>
	      <el-step title="财务已确认" description="2017-09-21 14:04:22"></el-step>
	    </el-steps>
	    <div class="audit-state-panel" v-if="current_user.user_type=='manager' && order.manager_confirm==false && (order.workflow_state=='installed' || order.workflow_state=='confirm_installed')">
	    		<el-button type="primary"  class="otherAudit_button" @click="auditSure">确认</el-button>
	    </div>
	    <div class="otherAudit_pay" v-if="current_user.user_type=='finance' && order.manager_confirm==true && order.workflow_state!='completed'">
	    		<div style="padding-top: 3%;">订单金额：<span style="color: #31b69b;">{{order.amount_total_count | conver_money}}</span></div>
	    		<el-button type="primary"  class="otherAudit_button" @click="auditSure" v-if="order.amount_total_count <= current_user.amount">确认支付</el-button>
	    		<el-button type="primary"  class="otherAudit_button" disabled v-if="order.amount_total_count > current_user.amount">确认支付</el-button>
	    		<div class="otherAudit_balance" v-if="order.amount_total_count <= current_user.amount">账户余额：{{current_user.amount | conver_money}}</div>
	    		<div class="otherAudit_balance" style="color: #ff4949;" v-if="order.amount_total_count > current_user.amount">账户余额：{{current_user.amount | conver_money}},无法支付订单</div>
	    </div>
   </div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import { Fetch } from '@/utils/http_common'
	export default {
		computed: {
			...mapGetters('orders', ['order','current_user']),
			...mapGetters(['current_user']),
			stateIndex:function(){
				var z
				console.log(this.order)
				if(this.order.workflow_state=='completed'){
					z=2
				}else if(this.order.manager_confirm){
					z=1
				}
				return parseInt(z)
	   	 	}
		},
		methods: {
			auditSure(){
				console.log(this.current_user)
				if(this.current_user.user_type=='manager'){
					this.$http.post("orders/"+this.order.id  +"/state_event").then(res => {
//						this.order=res.order
						console.log(res) 
					})
				}
				if(this.current_user.user_type=='finance'){
					Fetch.post("orders/"+this.order.id +"/payment").then(res => {
						console.log(res) 
					})
				}
			}
		},	
	}
</script>
<style>
	.otherAudit_button{
		background-color:#13ce66;
		border: none;
		width: 100px;
		margin: 3% auto;
	}
	.otherAudit_pay{
		background: #f9fafc;
	    border-radius: 2px;
	    margin: 40px 0;
	    flex-flow: row nowrap;
	    justify-content: center;
	    align-items: center;
	   	text-align: center;
	   	color:#8492a6;
	}
	.otherAudit_balance{
		text-align: right;
		font-size: 13px;
		padding: 0px 3% 3% 0px;
	}
</style>
